<template>
  <div>
    <!-- 视频列表内容 -->
    <div class="main-video">
      <!-- 全部视频 -->
      <div class="all-video">
        <div class="all-content">
          <!-- 回收站 -->
          <div class="search">
            <div class="search-input">
              <el-input
                v-model="input"
                placeholder="请输入视频名称、发布人进行搜索"
              ></el-input>
            </div>

            <!-- 查询 -->
            <div class="btn">
              <el-button type="primary">查询</el-button>
            </div>
          </div>

          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane
              label="回收站(12)"
              name="second"
              v-show="recyclingContent"
            >
              <!-- 回收站内容 -->
              <div class="video-content">
                <!-- 图片区域 -->
                <div class="video-pic">
                  <img src="../assets/videopic.svg" alt="" />
                </div>
                <!-- 文字区域 -->
                <div class="video-text">
                  <p class="video-title">
                    视频标题视频标题视频标题视频标题视频标题
                  </p>
                  <p class="video-say">
                    视频说明视频说明视频说明视频说明，视频说明视频说明...
                  </p>
                  <!-- 标签 -->
                  <div class="tag">
                    <el-tag>视频标签一</el-tag>
                    <el-tag type="success">视频标签二</el-tag>
                    <el-tag type="info">视频标签三</el-tag>
                  </div>
                  <!-- 时间 -->
                  <div class="video-time">
                    <p class="name">李四</p>
                    <p class="time">2021-8-5 10:43:26</p>
                    <p class="pass">审核通过</p>
                  </div>
                </div>

                <!-- 恢复第一个 -->
                <div class="back-btn">
                  <el-button
                    type="primary"
                    @click="recoverydialogVisible = true"
                    >恢复</el-button
                  >
                  <!-- 彻底删除第一个 -->
                  <el-button
                    type="danger"
                    @click="Completelydelete = true"
                    icon="el-icon-delete"
                    >彻底删除</el-button
                  >
                </div>
                <el-dialog
                  title="删除"
                  :visible.sync="recoverydialogVisible"
                  width="30%"
                >
                  <span>确定恢复?</span>

                  <span slot="footer" class="dialog-footer">
                    <el-button @click="recoverydialogVisible = false"
                      >取 消</el-button
                    >
                    <el-button
                      type="primary"
                      @click="recoverydialogVisible = false"
                      >确 定</el-button
                    >
                  </span>
                </el-dialog>

                <!-- 彻底删除 -->
                <el-dialog
                  title="彻底删除"
                  :visible.sync="Completelydelete"
                  width="30%"
                >
                  <span>删除后不可恢复,确认删除?</span>

                  <span slot="footer" class="dialog-footer">
                    <el-button @click="Completelydelete = false"
                      >取 消</el-button
                    >
                    <el-button type="primary" @click="Completelydelete = false"
                      >确 定</el-button
                    >
                  </span>
                </el-dialog>
              </div>
              <div class="video-content">
                <!-- 图片区域 -->
                <div class="video-pic">
                  <img src="../assets/videopic.svg" alt="" />
                </div>
                <!-- 文字区域 -->
                <div class="video-text">
                  <p class="video-title">
                    视频标题视频标题视频标题视频标题视频标题
                  </p>
                  <p class="video-say">
                    视频说明视频说明视频说明视频说明，视频说明视频说明...
                  </p>
                  <!-- 标签 -->
                  <div class="tag">
                    <el-tag>视频标签一</el-tag>
                    <el-tag type="success">视频标签二</el-tag>
                    <el-tag type="info">视频标签三</el-tag>
                  </div>
                  <!-- 时间 -->
                  <div class="video-time">
                    <p class="name">李四</p>
                    <p class="time">2021-8-5 10:43:26</p>
                    <p class="pass">审核通过</p>
                  </div>
                </div>
                <!-- 恢复第二个 -->
                <div class="back-btn">
                  <el-button
                    type="primary"
                    @click="recoverydialogVisiblesecond = true"
                  >
                    恢复
                  </el-button>
                  <!-- 彻底删除第二个 -->
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    @click="Completelydeletesecond = true"
                  >
                    彻底删除
                  </el-button>
                </div>
                <el-dialog
                  title="彻底删除"
                  :visible.sync="Completelydeletesecond"
                  width="30%"
                >
                  <span>删除后不可恢复,确认删除? </span>

                  <span slot="footer" class="dialog-footer">
                    <el-button @click="Completelydeletesecond = false"
                      >取 消</el-button
                    >
                    <el-button
                      type="primary"
                      @click="Completelydeletesecond = false"
                      >确 定</el-button
                    >
                  </span>
                </el-dialog>

                <el-dialog
                  title="删除"
                  :visible.sync="recoverydialogVisiblesecond"
                  width="30%"
                >
                  <span>确定恢复?</span>

                  <span slot="footer" class="dialog-footer">
                    <el-button @click="recoverydialogVisiblesecond = false"
                      >取 消</el-button
                    >
                    <el-button
                      type="primary"
                      @click="recoverydialogVisiblesecond = false"
                      >确 定</el-button
                    >
                  </span>
                </el-dialog>
              </div>
              <div class="video-content">
                <!-- 图片区域 -->
                <div class="video-pic">
                  <img src="../assets/videopic.svg" alt="" />
                </div>
                <!-- 文字区域 -->
                <div class="video-text">
                  <p class="video-title">
                    视频标题视频标题视频标题视频标题视频标题
                  </p>
                  <p class="video-say">
                    视频说明视频说明视频说明视频说明，视频说明视频说明...
                  </p>
                  <!-- 标签 -->
                  <div class="tag">
                    <el-tag>视频标签一</el-tag>
                    <el-tag type="success">视频标签二</el-tag>
                    <el-tag type="info">视频标签三</el-tag>
                  </div>
                  <!-- 时间 -->
                  <div class="video-time">
                    <p class="name">李四</p>
                    <p class="time">2021-8-5 10:43:26</p>
                    <p class="pass">审核通过</p>
                  </div>
                </div>
                <div class="back-btn">
                  <el-button
                    type="primary"
                    @click="recoverydialogVisibleThird = true"
                  >
                    恢复
                  </el-button>
                  <!-- 彻底删除第三个 -->
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    @click="CompletelydeleteThird = true"
                  >
                    彻底删除
                  </el-button>
                </div>
                <el-dialog
                  title="删除"
                  :visible.sync="recoverydialogVisibleThird"
                  width="30%"
                >
                  <span>确定恢复?</span>

                  <span slot="footer" class="dialog-footer">
                    <el-button @click="recoverydialogVisibleThird = false"
                      >取 消</el-button
                    >
                    <el-button
                      type="primary"
                      @click="recoverydialogVisibleThird = false"
                      >确 定</el-button
                    >
                  </span>
                </el-dialog>

                <el-dialog
                  title="彻底删除"
                  :visible.sync="CompletelydeleteThird"
                  width="30%"
                >
                  <span>删除后不可恢复,确认删除</span>

                  <span slot="footer" class="dialog-footer">
                    <el-button @click="CompletelydeleteThird = false"
                      >取 消</el-button
                    >
                    <el-button
                      type="primary"
                      @click="CompletelydeleteThird = false"
                      >确 定</el-button
                    >
                  </span>
                </el-dialog>
              </div>

              <!-- 分页 -->
              <div class="page">
                <div class="page-num">
                  <span>共15条</span>
                </div>

                <div class="page-select">
                  <el-select v-model="value" clearable placeholder="5条/页">
                    <el-option
                      v-for="item in pageNum"
                      :key="item.Numone"
                      :label="item.numBer"
                      :value="item.Numone"
                    >
                    </el-option>
                  </el-select>
                </div>
                <div class="page-numBer">
                  <div class="block">
                    <el-pagination
                      background
                      layout="prev, pager, next"
                      :total="50"
                    >
                    </el-pagination>
                  </div>
                </div>
                <!-- <div class="go-page">
                  <span>跳转</span>
                  <input type="text" />
                  <span>页</span>
                </div> -->
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <!-- 标签列表 -->

      <!-- 分类列表 -->
    </div>
  </div>
</template>
<script>
export default {
  // 存放数据
  data() {
    return {
      navList: [
        {
          id: "1",
          name: "首页",
        },
        {
          id: "2",
          name: "视频管理",
        },
        {
          id: "3",
          name: "用户管理",
        },
        {
          id: "4",
          name: "数据统计",
        },
        {
          id: "5",
          name: "系统设置",
        },
      ],
      listIndex: 0,
      isnavbg: false,
      checked: true,
      success: true,
      successs: true,
      successThird: true,
      successFour: true,
      successFive: true,
      successSix: true,
      isActive: 0,
      isVideo: false,
      videoShow: 1,
      listContent: [
        {
          name: "视频列表",
        },
        {
          name: "标签列表",
        },
        {
          name: "分类列表",
        },
        {
          name: "水印列表",
        },
      ],
      input: "",
      inputs: "",
      activeName: "first",
      // 回收站

      //  删除
      removeShow: true,
      removeShowsecond: true,
      removeShowthird: true,
      removedialogVisible: false,
      removeseconddialogVisible: false,
      removethirddialogVisible: false,
      recyclingContent: true,

      // 恢复
      recoverydialogVisible: false,
      recoverydialogVisiblesecond: false,
      recoverydialogVisibleThird: false,

      // 彻底删除
      Completelydelete: false,
      Completelydeletesecond: false,
      CompletelydeleteThird: false,
      // 选择标签
      options: [
        {
          value: "选项1",
          label: "请选择标签",
        },
        {
          value: "选项2",
          label: "多选",
        },
      ],
      value: "",
      // 请选择分类
      optionSelect: [
        {
          values: "选项1",
          labels: "请选择分区分类",
        },
      ],
      // 分类列表
      optionsClasslist: [
        {
          valueList: "选项1",
          labelList: "请选择状态",
        },
        {
          valueList: "选项2",
          labelList: "有效",
        },
        {
          valueList: "选项3",
          labelList: "无效",
        },
      ],

      multipleSelection: [],
      // 视频列表
      videoList: 0,
      // 回收站隐藏

      allVideos: true,
      values: "",
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      // 分页
      pageNum: [
        {
          Numone: "5条/页",
          numBer: "5条/页",
        },
      ],
      Numone: "",
      dialogVisible: false,
      // 标签页

      tags: [
        { name: "标签一", type: "" },
        { name: "标签二", type: "success" },
        { name: "标签三", type: "info" },
        { name: "标签四", type: "warning" },
        { name: "标签五", type: "danger" },
      ],
      // 用户列表树节点
      trees: [
        {
          label: "首页",
          children: [
            {
              label: "案例区",
            },
            {
              label: "成片区",
            },
            {
              label: "素材区",
            },
          ],
        },
      ],

      valuepage: "",
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  mounted() {
    this.recyclingContent = true;

    document
      .querySelector("body")
      .setAttribute("style", "background-color:#f2f2f2;");
  },
  beforeDestroy() {
    document.querySelector("body").removeAttribute("style");
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);

      this.recyclingContent = true;
    },
    // 删除
    sure() {
      this.removeShow = false;
    },

    sureSecond() {
      this.removeShowsecond = false;
    },

    sureThird() {
      this.removeShowthird = false;
    },
    // handleCloseremove(done) {
    //   this.$confirm("确认关闭？")
    //     .then((_) => {
    //       done();
    //     })
    //     .catch((_) => {});
    // },

    // handleCloseremovesecond(done) {
    //   this.$confirm("确认关闭？")
    //     .then((_) => {
    //       done();
    //     })
    //     .catch((_) => {});
    // },

    // handleCloseremovethird(done) {
    //   this.$confirm("确认关闭？")
    //     .then((_) => {
    //       done();
    //     })
    //     .catch((_) => {});
    // },

    // 回收站
    recyclebin() {
      this.ecyclingShow = true;
      console.log("123");
    },

    // 恢复
    // handleCloseremoverecovery(done) {
    //   this.$confirm("确认关闭？")
    //     .then((_) => {
    //       done();
    //     })
    //     .catch((_) => {});
    // },

    // handleCloseremoverecoveryThird(done) {
    //   this.$confirm("确认关闭？")
    //     .then((_) => {
    //       done();
    //     })
    //     .catch((_) => {});
    // },

    // handleCloseremoverecoveryThird(done) {
    //   this.$confirm("确认关闭？")
    //     .then((_) => {
    //       done();
    //     })
    //     .catch((_) => {});
    // },

    // 彻底删除
    // handleCloseremovecompletely(done) {
    //   this.$confirm("确认关闭？")
    //     .then((_) => {
    //       done();
    //     })
    //     .catch((_) => {});
    // },

    // handleCloseCompletelydeletesecond(done) {
    //   this.$confirm("确认关闭？")
    //     .then((_) => {
    //       done();
    //     })
    //     .catch((_) => {});
    // },

    // handleCloseremoverecoveryThird(done) {
    //   this.$confirm("确认关闭？")
    //     .then((_) => {
    //       done();
    //     })
    //     .catch((_) => {});
    // },
    // 标签

    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    // 删除
    remove() {
      this.$confirm("确定删除?", "删除", {
        confirmButtonText: "确定",

        cancelButtonText: "取消",

        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //     remove(){
    //  console.log('123')
    // },
    // 树形节点
    handleNodeClick(trees) {
      console.log(trees);
    },
  },
  // 表格
  toggleSelection(rows) {
    if (rows) {
      rows.forEach((row) => {
        this.$refs.multipleTable.toggleRowSelection(row);
      });
    } else {
      this.$refs.multipleTable.clearSelection();
    }
  },
  // handleSelectionChange(val) {
  //   this.multipleSelection = val;
  // },
  showInput() {
    this.inputVisible = true;
    this.$nextTick((_) => {
      this.$refs.saveTagInput.$refs.input.focus();
    });
  },

  handleInputConfirm() {
    let inputValue = this.inputValue;
    if (inputValue) {
      this.dynamicTags.push(inputValue);
    }
    this.inputVisible = false;
    this.inputValue = "";
  },

  // 分页
  handleSizeChange(val) {
    console.log(`每页 ${val} 条`);
  },
  handleCurrentChange(val) {
    console.log(`当前页: ${val}`);
  },
  // 退出
  out() {
    this.$router.push({
      path: "/",
    });
  },
};
</script>






<style lang="scss" scoped>
// 头部内容
.header {
  width: 100%;
  min-width: 1200px;
  height: 35px;
  display: flex;
  padding-top: 10px;

  justify-content: space-around;
  background-color: rgb(84, 92, 100);

  .header-left {
    margin-top: -4px;
    margin-left: 87px;
    color: white;

    span {
      display: inline-block;
      margin-left: 10px;
      font-size: 28px;
      font-family: "Arial Negreta", "Arial Normal", Arial, sans-serif;
      font-weight: 700;
    }
  }
  .navVideo {
    width: 120px;
    height: 41px;

    border-bottom: 1px solid rgb(255, 208, 75);
    border-bottom-color: rgb(255, 208, 75);

    a {
      color: rgb(255, 208, 75) !important;
    }
  }
  .header-nav {
    width: 787px;
    position: relative;
    top: -7px;
    margin-right: 458px;
  }

  .header-nav > div {
    display: flex;

    justify-content: space-between;

    a {
      color: white;
      font-size: 18px;
      font-weight: 700;
      text-decoration: none;
    }
  }
  .header-login {
    width: 200px;
    display: flex;
    justify-content: space-around;
  }
  .header-user {
    position: relative;
    margin-top: 3px;
  }
  span {
    font-size: 14px;
    display: inline-block;
    margin-right: 10px;
  }
  img {
    position: absolute;
    top: 9px;
  }
  .header-out {
    margin-top: 3px;
  }
}

// 视频列表
.video {
  width: 100%;
  margin-top: 25px;
  min-width: 1200px;

  .list-content {
    width: 1378px;
    height: 52px;
    padding-left: 53px;
    margin: 0 auto;
    display: flex;
    min-width: 1200px;
    background-color: white;
  }
  .list-content > div {
    width: 112px;
    height: 30px;

    margin-top: 12px;
    border-color: #aaaaaa;
    // border-radius: 5px;

    // border-top-right-radius: 0px;
    // border-bottom-right-radius: 0px;
    box-sizing: border-box;
    border: 1px solid #aaaaaa;
    text-align: center;
  }
  .list-content > div:hover {
    cursor: pointer;
  }
  a {
    font-size: 13px;
    text-decoration: none;
    margin-top: 5px;
    color: #333333;
    display: inline-block;
  }
}

.active {
  background-color: #aaaaaa;

  a {
    color: white;
  }
}

// 全部视频
.all-video {
  width: 100%;
  min-width: 1200px;
  margin-top: 24px;
  .all-content {
    width: 1378px;
    position: relative;
    min-width: 1200px;
    padding-left: 53px;
    margin: 0 auto;

    background-color: white;
    .search {
      width: 1270px;
      min-width: 1200px;
      display: flex;
      position: relative;
      margin: 0 auto;
      top: 22px;
      justify-content: center;

      font-weight: 400;

      color: #000000;

      .search-input {
        width: 250px;
        // margin-top: 3px;
      }
      .choose-label {
        width: 150px;
        margin-left: 20px;
      }
      .choose-Select {
        margin-left: 20px;
        input {
          width: 153px;
        }
      }
      .btn {
        width: 61px;
        margin-left: 15px;
        button {
          text-align: center;
          align-items: center;
          span {
            text-align: center;
          }
        }
      }
    }
  }
}

.el-button {
  padding: 11px 20px;
  // margin-top: 1.3px;
}
.el-tabs__item {
  height: 22px !important;
  line-height: 13px !important;
}

// 全部视频内容
.video-content {
  // width: 100%;
  width: 1240px;
  margin-top: 15px;
  justify-content: flex-start;
  margin-left: 25px;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
}
.video-pic {
  margin-right: 35px;
}
.video-text {
  width: 990px;
  position: relative;
  p {
    margin-bottom: 9px;
  }
}
.back-btn {
  height: 35px;
  display: flex;
  margin-top: 30px;

  button {
    height: 35px;
    margin-right: 15px;
    padding-top: 11px;
    outline: none;
    cursor: pointer;
    border-radius: 5px;
  }
}
.tag {
  span {
    display: inline-block;
    margin-bottom: 15px;

    margin-right: 20px;
  }
}

.video-title {
  color: #333333;
  font-size: 14px;
}
.video-say {
  font-size: 14px;
  color: #7f7f7f;
}

.video-time {
  width: 400px;
  display: flex;
  justify-content: flex-start;
  margin-left: 3px;

  .name {
    font-size: 14px;
    color: #7f7f7f;
    margin-right: 24px;
  }
  .time {
    font-size: 14px;
    color: #333333;
    margin-right: 24px;
  }
  .case {
    font-size: 14px;
    color: #7f7f7f;
  }
  // 审核通过
  .pass {
    color: #58c192;
    font-size: 14px;
  }
}
.linepic {
  margin-right: 20px;
}

// 分页

.page {
  width: 853px;
  margin-bottom: 40px;
  display: flex;
  margin-left: 15px;
  justify-content: flex-start;
  margin-top: 10px;
}
.page-num {
  width: 100px;
  margin-top: 16px;
  // margin-right: 15px;
}
span {
  font-size: 14px;
}
.page-select {
  margin-right: 15px;
  width: 123px;
  margin-top: 8px;

  input {
    height: 21px;
  }
}

.page-numBer {
  margin-top: 12px;
}

.go-page {
  width: 500px;
  margin-top: 13px;

  span {
    display: inline-block;
    margin-right: 5px;
    margin-left: 8px;
  }
  input {
    width: 35px;
    outline: none;
    border-radius: 3px;
    text-align: center;
    height: 25px;
    border: 1px solid rgba(220, 230, 234, 1);
  }
}

.el-input__icon {
  line-height: 21px !important;
}

// 标签列表
.tagList {
  width: 1378px;
  margin-top: 15px;
  height: 697px;
  min-width: 1200px;
  margin: 0 auto;
  margin-top: 15px;
  padding-left: 53px;
  background-color: white;
}
.tagContent {
  width: 1378px;
  position: relative;
  min-width: 1200px;
  display: flex;

  justify-content: center;
}
.tagCenter {
  width: 1240px;

  margin-left: 25px;
  border-top: 1px solid #e4e7ed;
  border-bottom: 1px solid #e4e7ed;
}
.tagText {
  margin-top: 15px;
  p {
    font-size: 14px;
    color: #333333;
    font-weight: bold;
    margin-bottom: 13px;
  }
}
.tag-last {
  border-bottom: none;
}
.tagOne {
  // width: 700px;
  border-bottom: 1px solid #e4e7ed;
  button {
    width: 70px !important;
    height: 41px !important;
    padding: 12px 7px !important;
  }
  span {
    display: inline-block;
    // margin-right: 20px;
    margin-bottom: 20px;
  }
}

.tag-input {
  width: 300px;
  position: relative;
  height: 35px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.tag-btn {
  position: absolute;
  margin-top: 20px;

  margin-bottom: 20px;
  right: 372px;
  button {
    text-align: center;
    align-items: center;
  }
}
// .el-tabs__header {
//    width: 500px !important;
// }
// .el-tabs__header .is-top {
//  width: 500px !important;
// }
.el-tabs__nav-wrap {
  margin-top: 15px !important;
}

// 标签
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
// 分类列表
.user-list {
  width: 1429px;
  margin-top: 15px;
  height: 535px;
  min-width: 1200px;
  padding-bottom: 105px;
  display: flex;
  justify-content: space-around;
  margin: 0 auto;
  margin-top: 15px;
  // padding-left: 53px;

  background-color: white;
}
.user-left {
  width: 200px;
  padding-right: 10px;
  border-right: 1px solid #f2f2f2;
  margin-top: 40px;
}
.user-right {
  width: 990px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 38px;
}
.user-input {
  width: 300px;
  height: 0px;
  margin-right: 30px;
  input {
    width: 300px;
  }
}
.user-select {
  margin-right: 23px;
  height: 0px;
}

.form-list {
  width: 901px;
  margin-bottom: 24px;
  border-radius: 3px;
  table {
    width: 898px;
    height: 30px;
    text-align: center;
    margin-top: 35px;
    // border: 1px solid #ebebeb;

    tr {
      height: 30px;
      line-height: 30px;

      td {
        width: 130px;
        height: 50px;
        line-height: 50px;
        font-size: 13px;
        // border-right: 1px solid #ebebeb;
        // border-bottom: 1px solid #ebebeb;

        // border-top: 1px solid #ebebeb;

        border: 1px solid #ebebeb;
        .three-btn {
          width: 300px;

          margin: 0 auto;
          justify-content: center;
          text-align: center;
          display: flex;
        }
        button {
          width: 61px;
          padding: 11px 15px;
          margin-top: 10px;
          margin-bottom: 10px;
          font-size: 14px;
        }
      }
    }
  }
}
</style>